import { useEffect, useState } from "react";
import "@/css/presentation.less";

interface Activity {
  joinNum: number;
  accumulatedNum: number;
  visitNum: number;
}

interface PresentationProps {
  activityList: Activity | null;
}

export default function Presentation({ activityList }: PresentationProps) {
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      // 监听页面滚动高度，当滚动时设置透明状态
      setIsScrolled(window.scrollY > 0);
    };

    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  if (!activityList) return <div>加载中...</div>; // 如果没有数据，显示加载中

  return (
    <div className={`presentation ${isScrolled ? "scrolled" : ""}`}>
      <div>
        <p className="yellow">{activityList.joinNum}</p>
        <p className="gray">参与人数</p>
      </div>
      <div>
        <p className="yellow">{activityList.accumulatedNum}</p>
        <p className="gray">累计票数</p>
      </div>
      <div>
        <p className="yellow">{activityList.visitNum}</p>
        <p className="gray">累计访问</p>
      </div>
    </div>
  );
}
